<template>
    <div class="outer-box">
        <TitleItem iconName="zhaopian">照片墙</TitleItem>
        <div class="main-box">
            <div class="inner-box" @mouseover="changeInterval(true)" @mouseleave="changeInterval(false)">
                <div class="icon">
                    <icon iconClass="xiangxia" color="rgba(255, 255, 255, 0.7)" style="cursor:pointer;transform:rotate(90deg);width:25px;height:25px;float:left;z-index:10" @click="clickIcon('left')"></icon>
                    <icon iconClass="xiangxia" color="rgba(255, 255, 255, 0.7)" style="cursor:pointer;transform:rotate(-90deg);width:25px;height:25px;float:right;z-index:10" @click="clickIcon('right')"></icon>
                </div>
                <div class="picture" v-for="(img,index) in avatars" :key="index" v-show="(index+1)===currentIndex*3||(index+1)===((currentIndex*3)-1)||(index+1)===((currentIndex*3)-2)">
                    <img :src="img.avatar">
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            currentIndex :1,//当前所在图片组下标，即第几组图片
			timer:null,//定时轮询
            avatars:[]
        }
    },
    //单张图片轮
    methods:{
        //开启定时器
        startInterval(){
            // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
            clearInterval(this.timer);
            this.timer = setInterval(()=>{
                this.currentIndex++;
                //如果此时当前三个图片最大的索引值大于了数组长度就返回第一张图片
                if(this.currentIndex*3 > this.avatars.length){
                    this.currentIndex = 1
                }
            },5000)
        },
        // 点击左右箭头
        clickIcon(val){
            if(val==='right'){
                //如果点击右箭头,此时换下一组图片
                this.currentIndex++;
                //如果此时当前三个图片最大的索引值大于了数组长度就返回第一张图片
                if(this.currentIndex*3 > this.avatars.length){
                    this.currentIndex = 1;
                }
            }else{
                //如果点击右箭头,此时换上一组图片
                if(this.currentIndex <= 1){
                    //如果此时已经换到了第一组图片就把图片组数换成数组长度/3,即最后一组图片
                    console.log('$','currentIndex此时变成了'+this.avatars.length/3+'#'+this.avatars.length);
                    this.currentIndex = (this.avatars.length/3);
                }
                this.currentIndex--;
                console.log('#','currentIndex此时变成了'+this.currentIndex);
            }
        },
        //鼠标移入移出控制
        changeInterval(val){
            if(val){
                clearInterval(this.timer)
            }else{
                this.startInterval()
            }
        }
    },
    //进入页面启动发起axios请求获取用户头像并开启定时器
    mounted(){
        let  that = this;
        this.$api.imageApi.getImg().then(function (res) {
            // console.log('avatars:',that.avatars);
            console.log("res.data:",res.data);
            that.avatars = res.data
        });
        this.startInterval()
    }
}
</script>

<style lang="less" scoped>
.main-box{
    height: 270px * @topx;
    width: 707px * @topx;
    margin-bottom: 20px;
    border: 4px solid #FEB3A9;
    position: relative;
}
.inner-box{
    width: 680px * @topx;
    height: 235px * @topx;
    line-height: 235px * @topx;
    background: rgba(171, 44, 42, 0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}

.icon {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.picture {
    width: 137px * @topx;
    height: 168px * @topx;
    display: inline-block;
    margin-left:50px;
    vertical-align: middle;
    border-radius: 16px;
    background-color: aqua;
    background-color: transparent;
    transition: all 0.5s ease-in ;
    cursor: pointer;

}

img{
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

.picture:hover {
    transform: scale(1.2);
}

.transform {
    transform: rotate(-90deg);
}

</style>